<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房屋租赁平台</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
</head>

<body>
    <!-- 登录注册页面 -->
    <div class="auth-container" id="authPage">
        <div class="auth-form">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('login')">登录</div>
                <div class="tab" onclick="switchTab('register')">注册</div>
            </div>

            <form id="loginForm" class="active">
                <div class="form-group">
                    <input type="text" placeholder="手机号" required>
                </div>
                <div class="form-group">
                    <input type="password" placeholder="密码" required>
                </div>
                <button type="submit">登录</button>
            </form>

            <form id="registerForm">
                <div class="form-group">
                    <input type="text" placeholder="手机号" required>
                </div>
                <div class="form-group sms-code">
                    <input type="text" placeholder="验证码" required>
                    <button type="button" onclick="sendSMSCode()">获取验证码</button>
                </div>
                <div class="form-group">
                    <input type="password" placeholder="设置密码" required>
                </div>
                <button type="submit">注册</button>
            </form>
        </div>
    </div>

    <script>
        let showLogin = true;
        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');

        // 切换登录注册选项卡
        function switchTab(tab) {
            if (tab === 'login') {
                showLogin = true;
                updateFormVisibility();
            } else if (tab === 'register') {
                showLogin = false;
                updateFormVisibility();
            }
        }


        function updateFormVisibility() {
            if (showLogin) {
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            } else {
                loginForm.classList.add('hidden');
                registerForm.classList.remove('hidden');
            }
        }

        updateFormVisibility();

        // // 发送短信验证码
        // function sendSMSCode() {
        //     const btn = document.querySelector('#registerForm button');
        //     let countdown = 60;

        //     btn.disabled = true;
        //     btn.textContent = `${countdown}秒后重发`;

        //     const timer = setInterval(() => {
        //         countdown--;
        //         btn.textContent = `${countdown}秒后重发`;

        //         if (countdown <= 0) {
        //             clearInterval(timer);
        //             btn.disabled = false;
        //             btn.textContent = "获取验证码";
        //         }
        //     }, 1000);
        // }

        // 表单提交处理
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', e => {
                e.preventDefault();
                alert('操作成功！');
            });
        });
    </script>

</body>

</html>